<template>
  <n-space vertical style="margin-top: 10px">
    <div>
      <span class="theme-title">主题</span>

      <div class="theme">
        <div>
          <div
            class="item"
            tabindex="0"
            :class="{ itemActive: commonVar.theme === 'light' ? true : false }"
            @click="handlerChangeTheme('light')"
          >
            <n-icon size="25">
              <WeatherSunny20Regular />
            </n-icon>
          </div>
          <div class="description">浅色</div>
        </div>

        <div>
          <div
            class="item"
            tabindex="0"
            :class="{ itemActive: commonVar.theme === 'dark' ? true : false }"
            @click="handlerChangeTheme('dark')"
          >
            <n-icon size="25">
              <WeatherMoon20Regular />
            </n-icon>
          </div>
          <div class="description">深色</div>
        </div>

        <div>
          <div
            class="item"
            tabindex="0"
            :class="{ itemActive: commonVar.theme === 'system' ? true : false }"
            @click="handlerChangeTheme('system')"
          >
            <n-icon size="25">
              <WeatherSunnyLow20Regular />
            </n-icon>
          </div>
          <div class="description">跟随系统</div>
        </div>
      </div>

      <div class="switch">
        <div class="switch-dark">
          <span>深色侧边栏</span>
          <n-switch
            v-model:value="commonVar.siderInverted"
            @update:value="handleChangeSiderInverted"
          >
            <template #checked-icon>
              <n-icon :component="ArrowForwardOutline" />
            </template>
            <template #unchecked-icon>
              <n-icon :component="ArrowBackOutline" />
            </template>
          </n-switch>
        </div>

        <div class="switch-dark">
          <span>深色顶栏</span>
          <n-switch
            v-model:value="commonVar.headerInverted"
            @update:value="handleChangeHeaderInverted"
          >
            <template #checked-icon>
              <n-icon :component="ArrowForwardOutline" />
            </template>
            <template #unchecked-icon>
              <n-icon :component="ArrowBackOutline" />
            </template>
          </n-switch>
        </div>
      </div>
    </div>

    <div>
      <span class="theme-title">主题颜色</span>
      <div class="theme-config">
        <div class="config-item">
          <span>主色</span>
          <div style="width: 100px">
            <n-color-picker
              v-model:value="config.primary"
              :show-preview="true"
              :modes="['hex']"
              :swatches="swatches"
            />
          </div>
        </div>

        <div class="config-item">
          <span>成功色</span>
          <div style="width: 100px">
            <n-color-picker
              v-model:value="config.success"
              :modes="['hex']"
              :swatches="swatches"
              :show-preview="true"
            />
          </div>
        </div>

        <div class="config-item">
          <span>信息色</span>
          <div style="width: 100px">
            <n-color-picker
              v-model:value="config.info"
              :modes="['hex']"
              :swatches="swatches"
              :show-preview="true"
            />
          </div>
        </div>

        <div class="config-item">
          <span>警告色</span>
          <div style="width: 100px">
            <n-color-picker
              v-model:value="config.warning"
              :modes="['hex']"
              :swatches="swatches"
              :show-preview="true"
            />
          </div>
        </div>

        <div class="config-item">
          <span>错误色</span>
          <div style="width: 100px">
            <n-color-picker
              v-model:value="config.error"
              :modes="['hex']"
              :swatches="swatches"
              :show-preview="true"
            />
          </div>
        </div>
      </div>
    </div>

    <div>
      <span class="theme-title">圆角</span>
      <div class="border-radius">
        <div class="radius-item">
          <span>圆角</span>
          <div style="width: 140px">
            <n-input-number
              @update:value="handleChangeRadius"
              v-model:value="config.borderRadius"
              :min="3"
              :max="20"
              button-placement="both"
              style="text-align: center"
            />
          </div>
        </div>
      </div>
    </div>

    <div>
      <span class="theme-title">字体</span>
      <div class="border-radius">
        <div class="radius-item">
          <span>字体大小</span>
          <n-dropdown trigger="hover" :options="fontOptions" @select="handleSelect">
            <n-button circle>
              <template #icon>
                <n-icon><TextFontSize20Regular /></n-icon>
              </template>
            </n-button>
          </n-dropdown>
        </div>
      </div>
    </div>
  </n-space>
</template>

<script setup>
import { ref, onMounted, computed } from "vue";
import { useThemeVars } from "naive-ui";
import { ArrowBackOutline, ArrowForwardOutline } from "@vicons/ionicons5";
import {
  WeatherSunnyLow20Regular,
  WeatherSunny20Regular,
  WeatherMoon20Regular,
  TextFontSize20Regular,
} from "@vicons/fluent";
onMounted(() => {});
import { useThemeStore } from "@/stores/models/theme";

const fontOptions = [
  {
    label: "13px",
    key: 13,
  },
  {
    label: "14px",
    key: 14,
  },
  {
    label: "15px",
    key: 15,
  },
  {
    label: "16px",
    key: 16,
  },
];
const swatches = ref([
  "#f5222d",
  "#fa541c",
  "#fa8c16",
  "#fadb14",
  "#a0d911",
  "#52c41a",
  "#13c2c2",
  "#1677ff",
  "rgb(13, 148, 150)",
  "#2f54eb",
  "#722ed1",
  "#eb2f96",
  "#262626",
  "#595959",
  "rgb(187, 27, 27)",
  "#faad14",
]);
const themeStore = useThemeStore();
const commonVar = themeStore.commonVar;
const config = themeStore.themeConfig;
const theme = useThemeVars();
const primaryColor = computed(() => theme.value.primaryColor);
const textColor3 = computed(() => theme.value.textColor3);
const dividerColor = computed(() => theme.value.dividerColor);
const borderRadius = computed(() => theme.value.borderRadius);
const textColorBase = computed(() => theme.value.textColorBase);
const fontSizeLarge = computed(() => theme.value.fontSizeLarge);
const fontSizeTiny = computed(() => theme.value.fontSizeTiny);

//修改主题
const handlerChangeTheme = (theme) => {
  commonVar.theme = theme;
};

const handleChangeSiderInverted = (value) => {
  commonVar.siderInverted = value;
};
const handleChangeHeaderInverted = (value) => {
  commonVar.headerInverted = value;
};

//修改圆角配置
const handleChangeRadius = (value) => {
  themeStore.themeConfig.borderRadius = value;
};

//选择字体
const handleSelect = (value) => {
  themeStore.themeConfig.fontSize = value;
};
</script>

<style scoped lang='scss'>
.theme {
  columns: 3;
  margin-top: 12px;
  padding: 3px;
}

.item {
  display: flex;
  width: 100px;
  height: 52px;
  border-radius: v-bind(borderRadius);
  border: 1px solid #ccc;
  cursor: pointer;
  box-shadow: 0 0 0 0 v-bind(primaryColor);
  transition: box-shadow 0.3s ease-out;
  justify-content: center;
  align-items: center;
}

.item:hover {
  border: 2px solid v-bind(primaryColor);
}

.itemActive {
  border: 2px solid v-bind(primaryColor);
}

.description {
  text-align: center;
  padding: 12px;
  color: v-bind(textColor3);
  font-size: v-bind(fontSizeTiny);
}

.theme-title {
  font-size: v-bind(fontSizeLarge);
  font-weight: bold;
}

.switch {
  margin-top: 8px;
}

.switch .switch-dark {
  margin-bottom: 20px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 5px 0 5px;
  border-radius: v-bind(borderRadius);
  color: v-bind(textColorBase);
}

.theme-config {
  margin-top: 8px;
}

.theme-config .config-item {
  margin-bottom: 10px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 5px 0 5px;
  border-radius: v-bind(borderRadius);
  color: v-bind(textColorBase);
}

.theme-config .config-item > div {
  display: flex;
  align-items: center;
}

.switch-dark:hover {
  background-color: v-bind(dividerColor);
}

.config-item:hover {
  background-color: v-bind(dividerColor);
}

.border-radius {
  margin-top: 8px;
}

.border-radius .radius-item {
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 5px 0 5px;
  border-radius: v-bind(borderRadius);
  color: v-bind(textColorBase);
}

.radius-item:hover {
  background-color: v-bind(dividerColor);
}

.radiusActive {
  background-color: v-bind(primaryColor);
}
</style>